<template>
	<up-popup :show="showPopup" :safe-area-inset-bottom="true" mode="bottom" :round="16" @close="closePopup">
		<view class="popup-bottom-container">
			<view class="popup-header pr-80 text-ellipsis">
				{{ title }}
			</view>
			<view class="popup-close" @click="closePopup"></view>
			<view class="popup-content ptb-20 plr-24 safe-bottom-wrap">
				<view class="flex-wrap fs-26 c-grey-4e mb-40 lh-52">
					<view class="" v-for="(item, index) in arrContent">
						{{ item }}
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>
<script setup lang="ts">
const props = defineProps({
	modelValue: Boolean,
	title: {
		type: String,
		default: "",
	},
	content: {
		type: String,
		default: "",
	},
	closeIcon: {
		type: String,
		default: "close",
	},
	iconSize: {
		type: String,
		default: "24rpx",
	},
	iconColor: {
		type: String,
		default: "#1D2129",
	},
})
const emit = defineEmits(["update:modelValue", "handleShowNotice"])

const showPopup = computed({
	get() {
		return props.modelValue
	},
	set(newValue) {
		emit("update:modelValue", newValue)
	},
})
// 处理关闭按钮点击
const closePopup = () => {
	emit("update:modelValue", false)
	emit("handleShowNotice", false)
}
const arrContent = ref([])
onMounted(() => {
	arrContent.value = props.content.split("\n")
})
</script>

<style lang="scss" scoped>
.popup-bottom-container {
	background: linear-gradient(180deg, #fffade 0%, rgba(255, 255, 255, 0) 22%), #ffffff;
}
.lh-52 {
	line-height: 52rpx;
}
</style>
